<template>
  <div class="itemContainer">
    <Row>
      <Col span="8">
        <div class="thumbContainer">
          <img :src="imgUrl" alt="缩略图" style="width: 156px; height: 150px" />
        </div>
      </Col>
      <Col span="16">
        <Row class="contentContainer">
          <Col span="24" class="itemCol">
            <span class="itemTitle">{{ title }}</span>
            <span class="singleService" @click="serviceInfo(id)"
              >详细信息 >></span
            >
          </Col>
          <Col span="24" class="itemCol">
            <span class="publishInfo"
              >发布单位：{{ publishOrganization
              }}<span style="margin: 0 8px">|</span>发布时间：{{
                publishDate
              }}</span
            >
          </Col>
          <Col span="24">
            <span class="desc">描述：{{ desc }}</span>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>
<style scoped>
.itemContainer {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #006983;
  transition: all 0.3s;
  margin: 0 0.5rem;
  height: 173px;
}
.itemContainer:hover {
  box-shadow: 0px 1px 14px 8px rgba(0, 0, 0, 0.1);
}
.thumbContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 15px 15px 0;
}
.contentContainer {
  padding: 15px 15px 0 0;
}
.itemTitle {
  font-size: 18px;
  font-weight: bold;
  color: rgba(74, 74, 74, 1);
}
.singleService {
  float: right;
  color: rgba(11, 88, 208, 1);
  cursor: pointer;
}
.itemCol {
  margin-bottom: 8px;
}
.publishInfo {
  color: rgba(135, 135, 135, 1);
}
.desc {
  color: rgba(56, 71, 80, 1);
}
</style>
<script>
export default {
  name: "ServiceItem",
  data() {
    return {
      isHover: false,
    };
  },
  props: [
    "imgUrl",
    "title",
    "publishDate",
    "publishOrganization",
    "desc",
    "id",
  ],
  methods: {
    serviceInfo() {
      this.axios.get("service/" + this.id).then((res) => {
        if (res.data.code === 200) {
          sessionStorage.setItem("serviceInfo", JSON.stringify(res.data.data));
          this.$router.push("serviceInfo");
        }
      });
    },
  },
};
</script>
